<%--
  Created by IntelliJ IDEA.
  User: AdrianJ
  Date: 2024/6/11
  Time: 16:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<jsp:useBean id="timeCorrect" class="com.whu.exp1jsp.javabean.TimeCorrect">

</jsp:useBean>

<script>
    //js调用ajax实现图片上传返回地址
    const uploadImg = ()=>{
        document.getElementById("imgInput").click()
    }
    const handleUploadImg = (e)=>{
        const selectedFile = e.target.files[0]
        const formData = new FormData()
        formData.append('file', selectedFile)

        // 使用 fetch API 发送 formData
        fetch('https://www.yym-free.com/wz/file/defaultUpLoadFile', {
            method: 'POST',
            body: formData
        }).then(response => response.text()).then(data => {
                document.getElementById("imgShow").src = data
                document.getElementById("imgUrl").value = data
            })
            .catch(error => {
                console.error('上传过程中发生错误:', error);
                alert('上传过程中发生错误');
            });
    }

</script>

<div class="appearing-container">
    <!--新发布-->
    <div class="new-pruduct">
        <h1>发布闲置</h1>
        <form action="uploadProduct-servlet" method = "post">
        <div class="content-container">
            <!--标题、价格-->
            <div class="content-line">
                <h2>基本信息</h2>
                <div>
                    <h3>标题</h3>
                    <input name="productTitle" value="" type="text">
                </div>
                <div>
                    <h3>价格</h3>
                    <input name="productPrice" value="" type="number">
                </div>
            </div>
            <!--图片-->
            <div class="content-line">
                <h2>上传图片</h2>
                <input id="imgInput" onchange="handleUploadImg(event)" type="file" style="display: none">
                <button type="button" onclick="uploadImg()">上传单张图片</button>
                <div>
                    <input name="productImgs" id="imgUrl" type="hidden" value="">
                    <img id="imgShow" src="">
                </div>
            </div>
            <!--地址-->
            <div class="content-line">
                <h2>地址</h2>
                <h3>详细地址（到宿舍）</h3>
                <input name="location" value="" type="text">
            </div>
            <!--介绍-->
            <div class="content-line">
                <h2>商品介绍</h2>
                <textarea name="productIntro"></textarea>
            </div>
            <!--按钮-->
            <button type="submit" class="publish-btn" >发布</button>
        </div>
        </form>
    </div>
    <!--已发布-->
    <div class="my-products">
        <h1>已发布</h1>
        <div class="content-container">
            <c:forEach var="item" items="${publishedProducts}">
            <form action="updateProduct-servlet" method = "post">
            <div class="procuct-container">
                <!--背景-->
                <div class="block-back">
                    <img src="${item.productImgs}">
                    <div></div>
                </div>
                <!--图片-->
                <div class="block-img">
                    <img src="${item.productImgs}">
                </div>
                <!--基础信息容器-->
                <div class="block-basic">
                    <form action = "deleteProduct-servlet" method = "post" style="display:inline;align-self: end;">
                        <input type="hidden" name="productId" value="${item.productId}">
                        <button class="delete-btn" style="background: transparent; color: #383838; box-shadow: none; padding: 0">删除</button>
                    </form>
                    <div style="display: flex; align-items: center">
                        标题：
                        <input name="productTitle" value="${item.productTitle}">
                    </div>
                    <div style="display: flex; align-items: center">
                        价格：
                        <input type="number" name="productPrice" value="${item.productPrice}">
                    </div>
                    <h4 style="margin: 0">发布时间：${timeCorrect.correctTime(item.publishTime)}</h4>
                    <div style="display: flex; align-items: center">
                        地址：
                        <input name="location" value="${item.location}">
                    </div>
                    <c:choose>
                        <c:when test="${item.status >= 2}">
                            <form action = "contact-servlet" method = "post" style="display:inline;">
                                <input type="hidden" name="productId" value="${item.productId}">
                                <button type="submit" style="width: 100%">联系买家</button>
                            </form>
                        </c:when>
                        <c:otherwise>
                            <button style="background: linear-gradient(to right bottom, #ccc, #e1d0ce);">出售中</button>
                        </c:otherwise>
                    </c:choose>
                    <c:choose>
                        <c:when test="${item.status < 2}">
                            <button type="submit" style="width: 100%">确定更改</button>
                        </c:when>
                        <c:otherwise>
                            <form action="resell-servlet" method="post" style="display: inline">
                                <input type="hidden" name="productId" value="${item.productId}">
                                <button type="button" style="width: 100%">重新出售</button>
                            </form>
                        </c:otherwise>
                    </c:choose>
                </div>
                <!--介绍容器-->
                <textarea class="block-intro" name="productIntro">${item.productIntro}</textarea>
            </div>
            </form>
            </c:forEach>
        </div>
    </div>
</div>

